<template>
  <div class="EditGoods">
    <div class="options">
      <el-form :model="form" label-width="60px" inline label-position="left">
        <el-form-item label="商品名">
          <el-input v-model="form.name" size="small"></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="form.sort" placeholder="请选择类型" size="small">
            <el-option
              v-for="(sort, index) in goodsSort__"
              :key="index"
              :label="sort.text"
              :value="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item> </el-form-item>
      </el-form>
      <div class="upload">
        <div class="banner">
          上传商品轮播图<span> (提示：第一张作为列表展示图)</span>
        </div>
        <el-upload action="#" list-type="picture-card" :auto-upload="false">
          <template #default>
            <i class="el-icon-plus"></i>
          </template>
          <template #file="{ file }">
            <div>
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.url"
                alt=""
              />
              <span class="el-upload-list__item-actions">
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleRemove(file)"
                >
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </template>
        </el-upload>
      </div>
    </div>
    <div id="editor"></div>
  </div>
</template>

<script>
import { defineComponent, onMounted, ref } from 'vue'
import { goodsSort__ } from '../../../utils'
import {
  ElForm,
  ElFormItem,
  ElInput,
  ElSelect,
  ElOption,
  ElUpload,
} from 'element-plus'
import E from 'wangeditor'
export default defineComponent({
  name: 'EditGoods',
  components: {
    ElForm,
    ElFormItem,
    ElInput,
    ElSelect,
    ElOption,
    ElUpload,
  },
  setup() {
    //   表单数据
    const form = ref({
      name: '',
      sort: undefined,
    })
    onMounted(() => {
      const editor = new E('#editor')
      editor.config.zIndex = 0
      editor.create()
    })
    return { goodsSort__, form }
  },
})
</script>

<style lang="scss">
@import '../../../assets/styles/_var.scss';
.EditGoods {
  .el-form--inline {
    .el-form-item {
      margin-bottom: $pad-1;
    }
  }
  .upload {
    .banner {
      font-size: 15px;
      color: $gray-7;
      margin: 8px 0;
      span {
        font-size: 13px;
        color: $gray-6;
      }
    }
    .el-upload-list--picture-card {
      .el-upload-list__item {
        height: 100px;
        width: 100px;
      }
    }
    .el-upload--picture-card {
      height: 100px;
      width: 100px;
      line-height: 100px;
      margin: 0 8px 8px 0;
    }
  }
}
</style>
